<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="filterPolygon">Select >= 200</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
  name: "FilterPolygon.component",
  components: {Maptalks},
  setup() {


    const filterPolygon = () => {
      layer.value.filter([">=", "count", 200]).forEach(function (feature) {
        feature.updateSymbol([
          {
            "polygonFill": "rgb(216,115,149)"
          }
        ]);
      });
    }

    let layer = ref(null)

    let mapOnLoadCB = (map) => {
      map.setCenter([106.45, 29.23])
      map.setZoom(14)

      layer.value = new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_LAYER).addTo(map)

      // 画图层
      for (let i = 0; i < 3; i++) {
        new maptalks.Polygon([
          [106.45 + 0.02 * i, 29.23],
          [106.46 + 0.02 * i, 29.23],
          [106.46 + 0.02 * i, 29.25],
          [106.45 + 0.02 * i, 29.25]
        ], {
          "properties": {
            "count": (i + 1) * 100
          },
          "symbol": [
            {
              "polygonFill": "#747474",
              "polygonOpacity": 0.5,
              "lineColor": "#000",
              "lineWidth": 2
            },
            {
              "textName": "{count}",
              "textSize": 40,
              "textFill": "#fff"
            }
          ]
        }).addTo(layer.value)
      }
    };

    return {
      mapOnLoadCB,
      filterPolygon
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}
</style>
